<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 拖拽
 * @author by dxq613@gmail.com
 * @ignore
 */



var $ = require(&#39;jquery&#39;),
  dragBackId = BUI.guid(&#39;drag&#39;);

<span id='BUI-Component-UIBase-Drag'>/**
</span> * 拖拽控件的扩展
 * &lt;pre&gt;&lt;code&gt;
 *  var Control = Overlay.extend([UIBase.Drag],{
 *
 *  });
 *
 *  var c = new Contol({ //拖动控件时，在#t2内
 *      content : &#39;&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&#39;,
 *      dragNode : &#39;#header&#39;,
 *      constraint : &#39;#t2&#39;
 *  });
 * &lt;/code&gt;&lt;/pre&gt;
 * @class BUI.Component.UIBase.Drag
 */
var drag = function() {

};

drag.ATTRS = {

<span id='BUI-Component-UIBase-Drag-cfg-dragNode'>  /**
</span>   * 点击拖动的节点
   * &lt;pre&gt;&lt;code&gt;
   *  var Control = Overlay.extend([UIBase.Drag],{
   *
   *  });
   *
   *  var c = new Contol({ //拖动控件时，在#t2内
   *      content : &#39;&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&#39;,
   *      dragNode : &#39;#header&#39;,
   *      constraint : &#39;#t2&#39;
   *  });
   * &lt;/code&gt;&lt;/pre&gt;
   * @cfg {jQuery} dragNode
   */
<span id='global-property-dragNode'>  /**
</span>   * 点击拖动的节点
   * @type {jQuery}
   * @ignore
   */
  dragNode: {

  },
<span id='BUI-Component-UIBase-Drag-property-draging'>  /**
</span>   * 是否正在拖动
   * @type {Boolean}
   * @protected
   */
  draging: {
    setter: function(v) {
      if (v === true) {
        return {};
      }
    },
    value: null
  },
<span id='BUI-Component-UIBase-Drag-cfg-constraint'>  /**
</span>   * 拖动的限制范围
   * &lt;pre&gt;&lt;code&gt;
   *  var Control = Overlay.extend([UIBase.Drag],{
   *
   *  });
   *
   *  var c = new Contol({ //拖动控件时，在#t2内
   *      content : &#39;&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&#39;,
   *      dragNode : &#39;#header&#39;,
   *      constraint : &#39;#t2&#39;
   *  });
   * &lt;/code&gt;&lt;/pre&gt;
   * @cfg {jQuery} constraint
   */
<span id='global-property-constraint'>  /**
</span>   * 拖动的限制范围
   * @type {jQuery}
   * @ignore
   */
  constraint: {

  },
<span id='BUI-Component-UIBase-Drag-property-dragBackEl'>  /**
</span>   * @private
   * @type {jQuery}
   */
  dragBackEl: {
<span id='BUI-Component-UIBase-Drag-method-getter'>    /** @private **/
</span>    getter: function() {
      return $(&#39;#&#39; + dragBackId);
    }
  }
};
var dragTpl = &#39;&lt;div id=&quot;&#39; + dragBackId + &#39;&quot; style=&quot;background-color: red; position: fixed; left: 0px; width: 100%; height: 100%; top: 0px; cursor: move; z-index: 999999; display: none; &quot;&gt;&lt;/div&gt;&#39;;

function initBack() {
  var el = $(dragTpl).css(&#39;opacity&#39;, 0).prependTo(&#39;body&#39;);
  return el;
}
drag.prototype = {

  __bindUI: function() {
    var _self = this,
      constraint = _self.get(&#39;constraint&#39;),
      dragNode = _self.get(&#39;dragNode&#39;);
    if (!dragNode) {
      return;
    }
    dragNode.on(&#39;mousedown&#39;, function(e) {

      if (e.which == 1) {
        e.preventDefault();
        _self.set(&#39;draging&#39;, {
          elX: _self.get(&#39;x&#39;),
          elY: _self.get(&#39;y&#39;),
          startX: e.pageX,
          startY: e.pageY
        });
        registEvent();
      }
    });
<span id='BUI-Component-UIBase-Drag-method-mouseMove'>    /**
</span>     * @private
     */
    function mouseMove(e) {
      var draging = _self.get(&#39;draging&#39;);
      if (draging) {
        e.preventDefault();
        _self._dragMoveTo(e.pageX, e.pageY, draging, constraint);
      }
    }
<span id='BUI-Component-UIBase-Drag-method-mouseUp'>    /**
</span>     * @private
     */
    function mouseUp(e) {
      if (e.which == 1) {
        _self.set(&#39;draging&#39;, false);
        var dragBackEl = _self.get(&#39;dragBackEl&#39;);
        if (dragBackEl) {
          dragBackEl.hide();
        }
        unregistEvent();
      }
    }
<span id='BUI-Component-UIBase-Drag-method-registEvent'>    /**
</span>     * @private
     */
    function registEvent() {
      $(document).on(&#39;mousemove&#39;, mouseMove);
      $(document).on(&#39;mouseup&#39;, mouseUp);
    }
<span id='BUI-Component-UIBase-Drag-method-unregistEvent'>    /**
</span>     * @private
     */
    function unregistEvent() {
      $(document).off(&#39;mousemove&#39;, mouseMove);
      $(document).off(&#39;mouseup&#39;, mouseUp);
    }

  },
  _dragMoveTo: function(x, y, draging, constraint) {
    var _self = this,
      dragBackEl = _self.get(&#39;dragBackEl&#39;),
      draging = draging || _self.get(&#39;draging&#39;),
      offsetX = draging.startX - x,
      offsetY = draging.startY - y;
    if (!dragBackEl.length) {
      dragBackEl = initBack();
    }
    dragBackEl.css({
      cursor: &#39;move&#39;,
      display: &#39;block&#39;
    });
    _self.set(&#39;xy&#39;, [_self._getConstrainX(draging.elX - offsetX, constraint),
      _self._getConstrainY(draging.elY - offsetY, constraint)
    ]);

  },
  _getConstrainX: function(x, constraint) {
    var _self = this,
      width = _self.get(&#39;el&#39;).outerWidth(),
      endX = x + width,
      curX = _self.get(&#39;x&#39;);
    //如果存在约束
    if (constraint) {
      var constraintOffset = constraint.offset();
      if (constraintOffset.left &gt;= x) {
        return constraintOffset.left;
      }
      if (constraintOffset.left + constraint.width() &lt; endX) {
        return constraintOffset.left + constraint.width() - width;
      }
      return x;
    }
    //当左右顶点都在视图内，移动到此点
    if (BUI.isInHorizontalView(x) &amp;&amp; BUI.isInHorizontalView(endX)) {
      return x;
    }

    return curX;
  },
  _getConstrainY: function(y, constraint) {
    var _self = this,
      height = _self.get(&#39;el&#39;).outerHeight(),
      endY = y + height,
      curY = _self.get(&#39;y&#39;);
    //如果存在约束
    if (constraint) {
      var constraintOffset = constraint.offset();
      if (constraintOffset.top &gt; y) {
        return constraintOffset.top;
      }
      if (constraintOffset.top + constraint.height() &lt; endY) {
        return constraintOffset.top + constraint.height() - height;
      }
      return y;
    }
    //当左右顶点都在视图内，移动到此点
    if (BUI.isInVerticalView(y) &amp;&amp; BUI.isInVerticalView(endY)) {
      return y;
    }

    return curY;
  }
};

module.exports = drag;
</pre>
</body>
</html>
